<template>
  <div>
    <Header :loginState="'toLogin'"></Header>
    <Reload></Reload>
    <!-- HERO
            ============================================= -->
    <section id="hero-01" class="hero full-screen py-6">
      <div class="hero-bg-graphics">
        <img src="../assets/img/hero-bg-01.png" alt="/" />
      </div>
      <div class="hero-center">
        <div class="container">
          <div class="row align-items-center">
            <!-- HERO TEXT -->
            <div class="col-lg-6">
              <div class="hero-txt">
                <div>
                  <!-- Title -->
                  <h1 class="font-weight-bold">养生词条</h1>
                  <!-- Text -->
                  <h5 class="text-capitalize">
                    <span></span>
                    <span
                      class="element second-color"
                      :data-elements="healthNote"
                    ></span>
                  </h5>
                  <h5 class="py-3">
                    {{ sentence }}
                  </h5>
                </div>
                <!-- Buttons -->
                <div class="hero-btns">
                  <a href="#about" class="btn">
                    <span>了解更多</span>
                  </a>
                  <!-- <a href="portfolio-2-grid-01.html" class="btn btn-white ml-2">
                                        <span>View Projects</span>
                                    </a> -->
                </div>
              </div>
            </div>
            <!-- END HERO TEXT -->

            <!-- HERO IMAGE -->
            <div class="col-lg-6">
              <div class="hero-img">
                <img
                  class="img-fluid"
                  src="../assets/img/hero-01.png"
                  alt="hero-image"
                />
              </div>
            </div>
          </div>
          <!-- End row -->
        </div>
        <!-- End container -->
      </div>
      <!-- END HERO-CENTER -->
    </section>
    <!-- END HERO -->

    <!-- ABOUT
            ============================================= -->
    <section id="about" class="about py-6">
      <div class="about-bg-graphics">
        <img src="../assets/img/about-bg.png" alt="/" />
      </div>
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-6 mb-4 mb-lg-0">
            <img src="../assets/img/about-01.jpg" alt="/" class="w-100" />
          </div>

          <div class="col-lg-6">
            <!-- Title -->
            <div class="section-title">
              <h3 class="sub-title mb-2">关于我们</h3>
              <h2 class="title">网站介绍:</h2>
            </div>

            <!-- Text -->
            <p class="text-muted my-3">
              本网站基于对中医药数据分析的基础上，致力于为广大用户提供一站式养生资讯服务以及健康状况分析，在保证安全的前提下，让每位用户合理使用中医药。
            </p>
            <p class="text-muted my-3">
              Based on the analysis of Chinese medicine data, this website is
              committed to providing users with a one-stop health information
              service and health status analysis. Under the premise of ensuring
              safety, each user can use Chinese medicine rationally.
            </p>

            <!-- Buttons -->
            <div class="hero-btns">
              <a
                href="javascript:void(0);"
                class="btn btn-purple mt-3 mb-lg-0 mr-4"
                >更多信息</a
              >
            </div>
          </div>
        </div>
        <!-- End row -->
      </div>
      <!-- End container -->
    </section>
    <!-- END ABOUT -->

    <!-- COUNT_UP
            ============================================= -->
    <div id="count-up" class="count-up bg-light text-center py-6">
      <div class="container">
        <div class="row">
          <!-- Item-01 -->
          <div class="col-12 col-sm-6 col-md-3 mt-5 mt-lg-0 mb-md-0 count-item">
            <div class="count-icon">
              <i class="lni-download"></i>
            </div>
            <div class="count-content">
              <span
                class="timer count-number"
                data-from="0"
                data-to="286"
                data-speed="5000"
                >286</span
              >
            </div>
            <p class="mb-0">下载量</p>
          </div>

          <!-- Item-02 -->
          <div class="col-12 col-sm-6 col-md-3 mt-5 mt-lg-0 mb-md-0 count-item">
            <div class="count-icon">
              <i class="lni-pencil"></i>
            </div>
            <div class="count-content">
              <span
                class="timer count-number"
                data-from="0"
                data-to="6549"
                data-speed="5000"
                >6549</span
              >
            </div>
            <p class="mb-0">文章数</p>
          </div>

          <!-- Item-03 -->
          <div class="col-12 col-sm-6 col-md-3 mt-5 mt-lg-0 mb-md-0 count-item">
            <div class="count-icon">
              <i class="lni-gift"></i>
            </div>
            <div class="count-content">
              <span
                class="timer count-number"
                data-from="0"
                data-to="793"
                data-speed="5000"
                >793</span
              >
            </div>
            <p class="mb-0">获赞量</p>
          </div>

          <!-- Item-04 -->
          <div class="col-12 col-sm-6 col-md-3 mt-5 mt-lg-0 mb-md-0 count-item">
            <div class="count-icon">
              <i class="lni-emoji-happy"></i>
            </div>
            <div class="count-content">
              <span
                class="timer count-number"
                data-from="0"
                data-to="286"
                data-speed="5000"
                >286</span
              >
            </div>
            <p class="mb-0">用户数</p>
          </div>
        </div>
      </div>
    </div>
    <!-- END COUNT_UP -->

    <!-- SERVICES
            ============================================= -->
    <section id="services" class="services py-6">
      <div class="services-bg-graphics">
        <img src="../assets/img/services-bg.png" alt="/" />
      </div>

      <div class="container">
        <!-- Title -->
        <div class="section-title text-center">
          <h3 class="sub-title base-color mb-2">主要功能</h3>
          <h2 class="title text-dark">功能板块</h2>
        </div>

        <div class="row mt-5">
          <!-- Item 01 -->
          <!-- <div
            class="col-lg-4 col-md-6 mt-4 wow fadeInUp"
            data-wow-duration="1.25s"
          >
            <div class="serviceBox">
              <div class="service-icon">
                <img src="../assets/img/services/web-design.png" alt="/" />
              </div>
              <h3>药物禁忌</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut
                quam arcu. Proin nunc.
              </p>
            </div>
          </div> -->

          <!-- Item 02 -->
          <div
            class="col-lg-4 col-md-6 mt-4 wow fadeInUp"
            data-wow-duration="1.5s"
          >
            <div class="serviceBox">
              <div class="service-icon">
                <img src="../assets/img/services/blog.png" alt="/" />
              </div>
              <h3>针对人群</h3>
              <p>用 户可快速获取信息并提供条件判断自身情况</p>
            </div>
          </div>

          <!-- Item 03 -->
          <div
            class="col-lg-4 col-md-6 mt-4 text-md-left wow fadeInUp"
            data-wow-duration="1.75s"
          >
            <div class="serviceBox">
              <div class="service-icon">
                <img src="../assets/img/services/workflow.png" alt="/" />
              </div>
              <h3>食物相克</h3>
              <p>
                对于食物的搭配组合提供的比较科学的建议，并对搭配功效有简略的描述
              </p>
            </div>
          </div>

          <!-- Item 04 -->
          <!-- <div
            class="col-lg-4 col-md-6 mt-4 text-md-left wow fadeInUp"
            data-wow-duration="2s"
          >
            <div class="serviceBox">
              <div class="service-icon">
                <img src="../assets/img/services/coding.png" alt="/" />
              </div>
              <h3>亚健康测试</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut
                quam arcu. Proin nunc.
              </p>
            </div>
          </div> -->

          <!-- Item 05 -->
          <!-- <div
            class="col-lg-4 col-md-6 mt-4 text-md-left wow fadeInUp"
            data-wow-duration="2.25s"
          >
            <div class="serviceBox">
              <div class="service-icon">
                <img src="../assets/img/services/tools.png" alt="/" />
              </div>
              <h3>智慧问答</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut
                quam arcu. Proin nunc.
              </p>
            </div>
          </div> -->

          <!-- Item 06 -->
          <div
            class="col-lg-4 col-md-6 mt-4 text-md-left wow fadeInUp"
            data-wow-duration="2.5s"
          >
            <div class="serviceBox">
              <div class="service-icon">
                <img
                  src="../assets/img/services/call-center-agent.png"
                  alt="/"
                />
              </div>
              <h3>24小时养生</h3>
              <p>
                可以同时根据当前时辰提供更为详细的建议和方法

              </p>
            </div>
          </div>
        </div>
      </div>
      <!-- End container -->
    </section>
    <!-- END SERVICES -->

    <!-- PRICE
            ============================================= -->
    <!-- <section id="price" class="price bg-light py-6">
      <div class="price-right-bg-graphics">
        <img src="../assets/img/price-right-bg.png" alt="/" />
      </div>
      <div class="container">
        
        <div class="section-title text-center">
          <h3 class="sub-title base-color mb-2">词云</h3>
          <h2 class="title text-dark">近日关注</h2>
        </div>

        <div class="row">
          <WordCloud></WordCloud>
          
        </div>
      </div>
      
    </section> -->
    <!-- END PRICE -->

    <!-- BLOG
            ============================================= -->
    <!-- <section id="blog" class="blog py-6 bg-light">
      <div class="container">
        
        <div class="section-title text-center">
          <h3 class="sub-title base-color mb-2">论坛文章</h3>
          <h2 class="title text-dark">热点讨论</h2>
        </div>

        <div class="blog-section-right-bg">
          <img src="../assets/img/blog-section-right-bg.png" alt="/" />
        </div>

        <div class="blog-section-left-bg">
          <img src="../assets/img/blog-section-left-bg.png" alt="/" />
        </div>

        <div class="row mt-5">
           
          <div
            class="col-lg-4 col-md-6 mt-4 wow fadeInUp"
            data-wow-duration="1.25s"
          >
             
            <div class="rounded blog-item">
              <div class="image-blog">
                <img
                  src="../assets/img/blog/blog-img-01.jpg"
                  alt="/"
                  class="rounded-top"
                />
              </div>

              <div class="rounded-bottom blog-content p-4 text-center">
                <div class="blog-section-author">
                  <span> Posted by:<a href="#"> Admin </a> </span>
                  |
                  <span> 25th June, 2021</span>
                </div>

                <h5>
                  <a
                    href="blog-single-01.html"
                    target="_blank"
                    class="text-dark"
                    >How to become a successful businessman.</a
                  >
                </h5>
                <div class="blog-link mt-4">
                  <a
                    class="btn btn-sm"
                    href="blog-single-01.html"
                    target="_blank"
                    >Read More</a
                  >
                </div>
              </div>
            </div>
          </div>

           
          <div
            class="col-lg-4 col-md-6 mt-4 wow fadeInUp"
            data-wow-duration="1.25s"
            data-wow-delay="0.1s"
          >
             
            <div class="rounded blog-item">
              <div class="image-blog">
                <img
                  src="../assets/img/blog/blog-img-02.jpg"
                  alt="/"
                  class="rounded-top"
                />
              </div>
              <div class="rounded-bottom blog-content p-4 text-center">
                <div class="blog-section-author">
                  <span> Posted by:<a href="#"> Admin </a> </span>
                  |
                  <span> 25th June, 2021</span>
                </div>

                <h5>
                  <a
                    href="blog-single-01.html"
                    target="_blank"
                    class="text-dark"
                    >5 Tips to help you in mountain trip</a
                  >
                </h5>
                <div class="blog-link mt-4">
                  <a
                    class="btn btn-sm"
                    href="blog-single-01.html"
                    target="_blank"
                    >Read More</a
                  >
                </div>
              </div>
            </div>
          </div>

           
          <div
            class="col-lg-4 col-md-6 mt-4 wow fadeInUp"
            data-wow-duration="1.25s"
            data-wow-delay="0.3s"
          >
             
            <div class="rounded blog-item">
              <div class="image-blog">
                <img
                  src="../assets/img/blog/blog-img-03.jpg"
                  alt="/"
                  class="rounded-top"
                />
              </div>
              <div class="rounded-bottom blog-content p-4 text-center">
                <div class="blog-section-author">
                  <span> Posted by:<a href="#"> Admin </a> </span>
                  |
                  <span> 25th June, 2021</span>
                </div>

                <h5>
                  <a
                    href="blog-single-01.html"
                    target="_blank"
                    class="text-dark"
                    >The difference between UX and UI design</a
                  >
                </h5>
                <div class="blog-link mt-4">
                  <a
                    class="btn btn-sm"
                    href="blog-single-01.html"
                    target="_blank"
                    >Read More</a
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
    </section> -->
    <!-- END BLOG -->

    <!-- CONTACT
            ============================================= -->
    <section id="contact" class="contact py-6">
      <div class="container">
        <!-- Title -->
        <div class="section-title text-center">
          <h3 class="sub-title base-color mb-2">联系我们</h3>
          <h2 class="title text-dark">网站建设建议收件箱</h2>
        </div>

        <div class="row mt-5 contact-container align-items-center">
          <div class="col-lg-6 text-md-left">
            <div class="col-lg-12 contact-form">
              <form id="contactForm" class="form mt-2">
                <div class="row">
                  <div class="col-lg-12 form-item">
                    <div class="form-group">
                      <p>姓名</p>
                      <input
                        name="name"
                        id="name"
                        type="text"
                        class="form-control"
                        placeholder="你的姓名 *"
                        required
                      />
                    </div>
                  </div>
                  <div class="col-lg-12 form-item">
                    <div class="form-group">
                      <p>邮箱</p>
                      <input
                        name="email"
                        id="email"
                        type="email"
                        class="form-control"
                        placeholder="电子邮件 *"
                        required
                      />
                    </div>
                  </div>
                  <div class="col-12 form-item">
                    <div class="form-group">
                      <p>建议</p>
                      <textarea
                        name="comments"
                        id="comments"
                        rows="2"
                        class="form-control h-auto"
                        placeholder="建设建议..."
                      ></textarea>
                    </div>
                  </div>
                  <div class="col-sm-12 text-left">
                    <button
                      type="button"
                      class="btn btn-purple"
                      id="submit-btn"
                      onClick="sendEmail()"
                    >
                      发送建议
                    </button>
                    <div
                      id="message"
                      class="toast shadow-none main-btn bg-transparent"
                      role="alert"
                      aria-live="assertive"
                      aria-atomic="true"
                      data-delay="4000"
                    >
                      <div class="toast-body d-inline-block"></div>
                      <button
                        type="button"
                        class="pr-3 close"
                        data-dismiss="toast"
                        aria-label="Close"
                      >
                        <span aria-hidden="true" class="lni-close"></span>
                      </button>
                    </div>
                  </div>
                </div>
              </form>
              <!-- End form -->
            </div>
          </div>
          <div class="col-lg-6 contact-img">
            <img src="../assets/img/contact-img.jpg" alt="/" />
          </div>
        </div>
      </div>
      <!-- End container -->
    </section>
    <!-- END CONTACT -->
    <ReturnTop></ReturnTop>
  </div>
</template>

<script>
//获取养生词条
import { getHealNote, getSentence } from "../assets/json/healNote";

// JS
let echarts = require("echarts/lib/echarts");
require("echarts-wordcloud");
import "echarts/theme/macarons.js";
import { typedJS } from "../assets/js/apps/roiton";

// 组件
import Header from "../components/Header.vue";
import ReturnTop from "../components/ReturnTop.vue";
import Reload from "../components/Reload.vue";
import WordCloud from "../components/WordCloud.vue";
import axios from "axios";
export default {
  data() {
    return {
      healthNote: getHealNote().join(),
      sentence: getSentence(),
    };
  },
  created() {},
  mounted() {
    typedJS();
  },
  methods: {},
  components: {
    Header,
    ReturnTop,
    Reload,
    WordCloud,
  },
};
</script>

<style>
.element {
  /* display: inline-block; */
  white-space: nowrap;
  /* height: 24px; */
}
.hero-txt .text-capitalize {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
